<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="text">
<input type="button" value="加" onclick="fn1()">
<input type="button" value="减" onclick="fn2()">
<input type="button" value="乘" onclick="fn3()">
<input type="button" value="除" onclick="fn4()">
<h1>结果: <span></span> </h1>
<!--
1. 引入jq框架
2. 在每个按钮里面添加onclink=”fn1()“ fn2()  fn3()  fn4()
3. 在script标签里面声明四个方法
4.在每个方法里面取出文本框里面的值然后进行加减乘除运算
把结果显示到span标签里面-->

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>

function fn1() {
    let x=$("input:eq(0)").val();
    let y=$("input:eq(1)").val();
    $("span").text(x*1+y*1);

}
function fn2() {
    let x=$("input:eq(0)").val();
    let y=$("input:eq(1)").val();
    $("span").text(x*1-y*1);
}
function fn3() {
    let x=$("input:eq(0)").val();
    let y=$("input:eq(1)").val();
    $("span").text(x*y);
}
function fn4() {
    let x=$("input:eq(0)").val();
    let y=$("input:eq(1)").val();
    $("span").text(x/y);
}
</script>
</body>
</html>